<!-- 活动核销 -->
<template>
  <view class="container">
    <view class="data-box">
      <!-- 标题 -->
      <view class="title"> {{ eventsContacts.name }} </view>
      <!-- sku -->
      <view class="box-content">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/img/ZLQ8QCACX1GRYPHW6CY21699515371269.png">
          报名信息
          <text class="tips">请务必保证信息准确无误</text>
        </view>
        <view class="regist-info">
          <view class="item" v-for="sku in registSkuList" :key="sku.id" :class="sku.id === currnetSku.id ? 'active' : ''" @click="chooseSku(sku)">{{sku.personPetNum}}{{ sku.otherType ? ' + ' + sku.otherType : sku.otherType}}</view>
        </view>
      </view>
      <!-- 联系人信息 -->
      <view class="box-content">
        <view class="box-title">
          <img class="icons" src="https://img.qumoyugo.com/img/9JBTE78SM3GXFH1MERGEU1699515371276.png">
          联系人信息
        </view>
        <uni-forms class="box-form" ref="form" :modelValue="eventsOrder" label-width="60px">
          <uni-forms-item label="姓&nbsp;&nbsp;&nbsp;名">
            <uni-easyinput v-model="eventsContacts.nickname" placeholder="请务必填写真实姓名" />
          </uni-forms-item>
          <uni-forms-item label="手机号">
            <uni-easyinput type="number" v-model="eventsContacts.phone" placeholder="请务必填写真实手机号" />
          </uni-forms-item>
          <uni-forms-item label="备&nbsp;&nbsp;&nbsp;注">
            <uni-easyinput v-model="eventsContacts.orderRemark" type="textarea" placeholder="请输入备注" />
          </uni-forms-item>
        </uni-forms>
      </view>
      <BottomPay :option="eventsContacts" @operate="navigateToSign()"></BottomPay>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storage } from '@/utils/utils'
import { CONTACT_INFO_X_PER } from '@/assets/js/config'
import BottomPay from '@/components/bottomBar/pay'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const eventsOrder = ref({}) // 路由传递的信息
const eventsContacts = ref({}) // 路由传递的信息
const registSkuList = ref([])
const deductionConfigList = ref([])
const currnetSku = ref({})
const navigateToSign = () => {
  if (!eventsContacts.value.nickname) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return false
  }
  const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
  if (!eventsContacts.value.phone || !reg.test(eventsContacts.value.phone)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return false
  }
  storage.set(CONTACT_INFO_X_PER, { eventsContacts: eventsContacts.value, currnetSku: currnetSku.value, deductionConfigList: deductionConfigList.value })
  uni.redirectTo({
    url: `/events/eventsPay?id=${eventsOrder.value.id}&feeId=${currnetSku.value.id}`
  })
}
onLoad(option => {
  eventsOrder.value = option
  getInt()
})
// 选择sku计算价格
const chooseSku = (item) => {
  currnetSku.value = item
  $https({
    url: '/app/eventsOrder/calculatePrice',
    type: '',
    method: 'post',
    data: {
      eventsId: eventsOrder.value.id,
      feeConfigId: item.id
    }
  }).then(res => {
    if (res.code === 0) {
      eventsContacts.value.applyPrice = res.data.payAmount / 100
      eventsContacts.value.deductionAmount = res.data.deductionAmount / 100
    }
  })
}
const getInt = () => {
  $https({
    url: '/app/eventsInfo/enroll/' + eventsOrder.value.id,
    type: '',
    method: 'get'
  }).then(res => {
    if (res.code === 0) {
      registSkuList.value = res.data.feeConfigList || []
      eventsContacts.value = {
        ...res.data.customerInfo,
        feeConfigType: res.data.feeConfigType,
        amount: res.data.biscuit.amount,
        name: res.data.eventsName
      }
      deductionConfigList.value = res.data.deductionConfigList || []
      chooseSku(registSkuList.value[0])
    }
  })
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.container {
  background: #FFF8F0;
  min-height: 100vh;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
.title {
  margin-left: 22rpx;
  padding: 30rpx 0;
  font-size: 28rpx;
  font-weight: bold;
  color: #252525;
  line-height: 38rpx;
}
.box-content {
  margin: 0 22rpx 30rpx 22rpx;
  background: #ffffff;
  border-radius: 18rpx;
}
.box-title {
  margin: 0 30rpx;
  padding: 30rpx 0;
  font-size: 28rpx;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 30rpx;
  &::before{
    @include border(bottom, #EBEBEB)
  }
  .tips{
    font-size: 22rpx;
    color: #ED8241;
    margin-left: 8rpx;
    font-weight: normal;
    line-height: 24rpx;
    align-self: flex-end;
  }
  .icons{
    width: 32rpx;
    height: 30rpx;
    margin-right: 12rpx;
  }
}
.box-data {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 28rpx;
  .add-image {
    height: 52rpx;
    width: 52rpx;
    padding: 22rpx 36rpx;
  }
}
.data-warp {
  height: 61rpx;
  background: #f1f1f1;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin: 18rpx 36rpx;
  display: flex;
  align-items: center;
  position: relative;
  .remind-num {
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    font-size: 20rpx;
    text-align: center;
    width: 35rpx;
    height: 35rpx;
    background: #f1f1f1;
    color: #999999;
    border: 2px solid #ffffff;
    border-radius: 50%;
    line-height: 35rpx;
    color: var(--white);
    z-index: 100;
  }
}
.regist-info{
  padding: 30rpx 0 0 30rpx;
  display: flex;
  flex-wrap: wrap;
  .item{
    padding: 22rpx;
    margin: 0 30rpx 30rpx 0;
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2;
    color: #333;
    border-radius: 10rpx;
    font-size: 26rpx;
    position: relative;
    &.active{
      background-color: #FFF6EF;
      color: #EE751E;
      &::before{
        @include border(full, #EE751E, 10rpx)
      }
    }
  }
}
.text-warp {
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}
.contact-info {
  margin: 28rpx;
  display: flex;
  justify-content: flex-start;
  padding-bottom: 41rpx;
}
.text-title {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.text-data {
  font-size: 25rpx;
  font-weight: 500;
  color: #333333;
}
.text-title-remark {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  white-space: nowrap;
}
.text-data-remark {
  font-size: 25rpx;
  font-weight: 500;
  color: #333333;
}
.remark-input {
  width: 653rpx;
  height: 278rpx;
  background: #ffffff;
  border: 1px solid #999999;
  border-radius: 8rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  padding-bottom: 50rpx;
}
.remark-input-placeholder {
  color: #f76260;
}
.remark-input-data {
  margin-top: 19rpx;
  margin-left: 22rpx;
  font-size: 22rpx;
  font-weight: 400;
}

.agreement_div {
  padding-bottom: 120rpx;
  height: auto;
  margin: 28rpx;
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  line-height: 32rpx;
  display: flex;
  .isLink {
    color: #000000;
    font-weight: 500;
    color: #ee751e;
  }
  .agreement_img {
    margin-right: 10rpx;
    height: 32rpx;
    width: 32rpx;
  }
  .nocheck-image {
    height: 32rpx;
    width: 32rpx;
  }
  .check-image {
    height: 32rpx;
    width: 32rpx;
  }
  .agreement_txt {
    display: block;
    height: auto;
    font-size: 22rpx;
    line-height: 32rpx;
  }
}
</style>

<style scoped>
/deep/.uni-forms-item__label,
.default_txt {
  font-size: 28rpx !important;
  font-weight: 400 !important;
  color: #666666 !important;
}

/deep/.uni-forms {
  padding: 30rpx 30rpx 30rpx 30rpx;
  background-color: white;
  border-radius: 18rpx;
}
/deep/.input-padding {
  padding-top: 10rpx;
}
/deep/.uni-easyinput__placeholder-class {
  color: #999999 !important;
}
/deep/.uni-easyinput__content-input {
  /*-webkit-text-fill-color: black !important;*/
  font-size: 25rpx !important;
  font-weight: 400 !important;
  color: #333333 !important;
}
</style>
